<template>
    <basic-container>
        <el-form :inline="true">
            <el-form-item label="问题描述">
                <el-input
                    v-model="keyWordName"
                    :onkeyup="keyWordName=keyWordName.replace(/\s+/g,'')"
                    placeholder="请描述问题"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchList">搜索</el-button>
                <el-button plain @click="clearSearch">清空</el-button>
            </el-form-item>
        </el-form>
        <el-button
            class="madp-addbutton"
            type="primary"
            icon="el-icon-plus"
            @click="openDialog('新增')"
        >新增</el-button>
        <!-- 关键词列表数据 -->
        <div>
            <el-table
                :data="keyWordData"
                :header-cell-style="{
				background: 'rgb(255, 191, 191)',
				color: 'rgb(44,44,44)',
			}"
                stripe
                v-loading="tableLoading"
            >
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="problemDescription" label="问题描述" align="center"></el-table-column>
                <el-table-column prop="keyword" label="匹配关键词" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editKeyword('编辑',scope.row)">编辑</el-button>
                        <el-button type="text" @click="delectKeyword(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 列表分页 -->
        <div class="madp-pagination-wrap">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10, 20,30, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </div>
        <!-- 查看/编辑企业微信号 -->
        <el-dialog
            :title="dialogTittle"
            :visible.sync="dialog"
            :close-on-click-modal="false"
            :before-close="onClose "
        >
            <div class="madp-form">
                <el-form :rules="keywordInfoRules" ref="keywordInfoForm" :model="keywordInfo">
                    <el-form-item label=" 问题描述" label-width="100px" prop="problemDescription">
                        <el-input
                            maxlength="500"
                            type="textarea"
                            :rows="2"
                            v-model="keywordInfo.problemDescription"
                            :onkeyup="keywordInfo.problemDescription=keywordInfo.problemDescription.replace(/\s+/g,'')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="匹配关键词" label-width="100px" prop="keyword">
                        <el-input
                            maxlength="500"
                            v-model="keywordInfo.keyword"
                            @input="
									keywordInfo.keyword =
										keywordInfo.keyword.replace(/\s+/, '')
								"
                            placeholder="请输入标签名，按回车完成，多个标签用‘，’隔开"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="回复" label-width="100px" prop="reMsg">
                        <el-input
                            maxlength="500"
                            type="textarea"
                            :rows="2"
                            :onkeyup="keywordInfo.reMsg=keywordInfo.reMsg.replace(/\s+/g,'')"
                            v-model="keywordInfo.reMsg"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="madp-dialog-footer">
                    <el-button @click="onClose">取消</el-button>
                    <el-button type="primary" @click="addKeywordButton">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </basic-container>
</template>
<script>
import {
    addKeyword, // 新建关键词
    updateKeyword, //修改关键词
    keywordList, //分页查询关键词列表
    deleteKeyword //删除关键词
} from "@/api/operation-manage/keyword-manage.js";
export default {
    name: "keywordManage",
    data() {
        return {
            dialogTittle: "",
            keywordInfo: {
                keyword: "",
                problemDescription: "",
                reMsg: ""
            },
            keywordInfoRules: {
                keyword: [
                    {
                        required: true,
                        message: "请输入匹配关键词",
                        trigger: "blur"
                    }
                ],
                problemDescription: [
                    {
                        required: true,
                        message: "请输入问题描述",
                        trigger: "blur"
                    }
                ],
                reMsg: [
                    { required: true, message: "请输入回复", trigger: "blur" }
                ]
            },
            dialog: false,
            keyWordData: [],
            tableLoading: true,
            keyWordName: "",
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            currentRow: {}
        };
    },
    mounted() {
        this.getkeywordList();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.size + $index + 1;
        },
        editKeyword(tittle, data) {
            this.dialogTittle = tittle;
            this.dialog = true;
            this.keywordInfo = data;
        },
        openDialog(tittle) {
            this.dialogTittle = tittle;
            this.dialog = true;
        },
        delectKeyword(data) {
            this.$confirm("确认是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteKeyword(data.id).then((res) => {
                        if (res.data && res.data.code === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getkeywordList();
                        }
                    });
                })
                .catch(() => {});
        },

        addKeywordButton() {
            this.$refs["keywordInfoForm"].validate((valid) => {
                if (valid) {
                    if (this.dialogTittle === "新增") {
                        this.keywordInfo.keyword =
                            this.keywordInfo.keyword.replace("，", ",");
                        let data = {
                            ...this.keywordInfo
                        };
                        addKeyword(data).then((res) => {
                            if (res.data && res.data.code === 0) {
                                this.$message({
                                    type: "success",
                                    message: "添加成功!"
                                });
                                this.dialog = false;
                                this.$refs["keywordInfoForm"].resetFields();
                                this.getkeywordList();
                            }
                        });
                    } else if (this.dialogTittle === "编辑") {
                        this.keywordInfo.keyword =
                            this.keywordInfo.keyword.replace("，", ",");
                        let data = {
                            ...this.keywordInfo
                        };
                        updateKeyword(data).then((res) => {
                            if (res.data && res.data.code === 0) {
                                this.$message({
                                    type: "success",
                                    message: "修改成功!"
                                });
                                this.dialog = false;
                                this.$refs["keywordInfoForm"].resetFields();
                                this.getkeywordList();
                            }
                        });
                    }
                }
            });
        },
        onClose() {
            this.$refs["keywordInfoForm"].resetFields();
            this.dialog = false;
        },
        clearSearch() {
            this.keyWordName = "";
            this.getkeywordList();
        },
        searchList() {
            this.page.current = 1;
            this.getkeywordList();
        },
        getkeywordList() {
            let data = {
                size: this.page.size,
                current: this.page.current,
                problem: this.keyWordName
            };
            keywordList(data).then((res) => {
                if (res.data && res.data.code === 0) {
                    this.keyWordData = res.data.data.records;
                    this.page.total = res.data.data.total;
                    console.log("keywordList", res);
                    this.tableLoading = false;
                }
            });
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getkeywordList();
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getkeywordList();
        }
    }
};
</script>
<style lang="scss" scoped>
body {
    max-height: 1600px;
}
.madp-form {
    padding-right: 50px;
}
.madp-dialog-footer {
    display: flex;
    justify-content: flex-end;
}
.madp-addbutton {
    margin-bottom: 20px;
}
.madp-black-pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 10px;
}
.madp-pagination-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}
</style>
